<template>
<div class="app-container resume-preview-container">
  <el-row>
    <el-col :span="24">
      <el-card class="box-card card-base-form">
        <div>
            <div data-v-4892bd91="" class="zp-photo-bg">
            <div class="mini-program"></div> 
            <div class="zp-photo-top"></div> 
            <div class="zp-photo-container">
              <div class="zp-photo-imgDiv">
              <img src="../../../../../assets/img/resume-base-avatar.jpg" />
              </div> 
              <div class="zp-self-info">
              <p class="zp-self-info-name">{{baseForm.name}}</p> 
              <p class="zp-self-info-status">身份证号:{{baseForm.idCard}}</p>
              </div> 
              <div class="zp-self-detail">
              <ul class="zp-self-detail-basic">
                <li>
                  <span v-if="baseForm.sex == 1">男</span>
                  <span v-if="baseForm.sex == 0">女</span>
                  </li> 
                <li><p class="zp-split-line"></p></li> 
                <li>年龄:{{baseForm.age}}</li> 
                <li><p class="zp-split-line"></p></li> 
                <li>民族: {{baseForm.nation}}</li> 
                <li><p class="zp-split-line"></p></li> 
                <li>当前所在地:{{baseForm.provinceName}}</li>
              </ul> 
              <ul class="zp-self-detail-relation">
                <li><i class="fa fa-mobile-phone"></i>联系电话:{{baseForm.phone}}</li> 
                <li><i class="fa fa-qq"></i>QQ:{{baseForm.qq}}</li>
                <li><i class="fa fa-weixin"></i>微信:{{baseForm.wx}}</li>
              </ul>
              </div>
            </div>
            </div>
        </div>
     </el-card>
     
      <!-- <el-card class="box-card">
        <div>
            <div data-v-0b576ed6="" class="zp-wrap">
              <p class="zp-wrap-title">基本信息</p> 
              <ul class="zp-jobs-info">
                <li><span class="zp-jobs-info-title">姓名：</span> <span class="zp-jobs-info-content">{{baseForm.name}}</span></li> 
                <li>
                  <span class="zp-jobs-info-title">性别：</span> 
                  <span class="zp-jobs-info-content" v-if="baseForm.sex == 0">男</span>
                  <span class="zp-jobs-info-content" v-if="baseForm.sex == 1">女</span>
                </li> 
                <li><span class="zp-jobs-info-title">当前所在地：</span> <span class="zp-jobs-info-content">{{baseForm.provinceName}}</span></li> 
                <li><span class="zp-jobs-info-title">生日：</span> <span class="zp-jobs-info-content"><span>{{baseForm.birthday}}</span></span></li>
                <li><span class="zp-jobs-info-title">民族：</span> <span class="zp-jobs-info-content"><span>{{baseForm.nation}}</span></span></li>
                <li><span class="zp-jobs-info-title">联系电话：</span> <span class="zp-jobs-info-content"><span>{{baseForm.phone}}</span></span></li>
                <li><span class="zp-jobs-info-title">QQ：</span> <span class="zp-jobs-info-content"><span>{{baseForm.qq}}</span></span></li>
                <li><span class="zp-jobs-info-title">微信：</span> <span class="zp-jobs-info-content"><span>{{baseForm.wx}}</span></span></li>
                <li><span class="zp-jobs-info-title">身份证号：</span> <span class="zp-jobs-info-content"><span>{{baseForm.idCard}}</span></span></li>
                <li><span class="zp-jobs-info-title">联系地址：</span> <span class="zp-jobs-info-content"><span>{{baseForm.addr}}</span></span></li>
              </ul>
            </div>
        </div>
     </el-card> -->
     
      <el-card class="box-card" v-for="(edu, index) in resumeEduList" :key="edu.id">
        <div>
            <div data-v-0b576ed6="" class="zp-wrap">
              <p class="zp-wrap-title">教育信息-{{index+1}}</p> 
              <ul class="zp-jobs-info" v-if="edu.degree == 1">
                <li>
                  <span class="zp-jobs-info-title">学历/学位：</span>
                  <span class="zp-jobs-info-content" v-if="edu.degree == 1">高中</span>
                  <span class="zp-jobs-info-content" v-if="edu.degree == 2">大专</span>
                  <span class="zp-jobs-info-content" v-if="edu.degree == 3">本科</span>
                  <span class="zp-jobs-info-content" v-if="edu.degree == 4">硕士</span>
                  <span class="zp-jobs-info-content" v-if="edu.degree == 5">博士及以上</span>
                </li> 
                <li><span class="zp-jobs-info-title">届别：</span> <span class="zp-jobs-info-content" v-if="edu.sessions">第{{edu.sessions}}届</span></li> 
                <li><span class="zp-jobs-info-title">学校：</span> <span class="zp-jobs-info-content">{{edu.schoolName}}</span></li> 
                <li><span class="zp-jobs-info-title">班级：</span> <span class="zp-jobs-info-content"><span>{{edu.className}}</span></span></li>
                <li><span class="zp-jobs-info-title">学籍号：</span> <span class="zp-jobs-info-content"><span>{{edu.studentNo}}</span></span></li>
              </ul>

              <ul class="zp-jobs-info" v-else>
                <li>
                  <span class="zp-jobs-info-title">学历/学位：</span>
                  <span class="zp-jobs-info-content" v-if="edu.degree == 1">高中</span>
                  <span class="zp-jobs-info-content" v-if="edu.degree == 2">大专</span>
                  <span class="zp-jobs-info-content" v-if="edu.degree == 3">本科</span>
                  <span class="zp-jobs-info-content" v-if="edu.degree == 4">硕士</span>
                  <span class="zp-jobs-info-content" v-if="edu.degree == 5">博士及以上</span>
                </li> 
                <li><span class="zp-jobs-info-title">毕业院校：</span> <span class="zp-jobs-info-content">{{edu.schoolName}}</span></li> 
                <li><span class="zp-jobs-info-title">毕业时间：</span> <span class="zp-jobs-info-content">{{edu.endTime | timeFilter}}</span></li> 
                <li><span class="zp-jobs-info-title">专业：</span> <span class="zp-jobs-info-content">{{edu.profession}}</span></li> 
                <li><span class="zp-jobs-info-title">专业描述：</span> <span class="zp-jobs-info-content"><span>{{edu.professionDiscribe}}</span></span></li>
              </ul>
            </div>
        </div>
     </el-card>

      <el-card class="box-card" v-for="(work,index) in resumeWorkList" :key="work.id">
        <div>
            <div data-v-0b576ed6="" class="zp-wrap">
              <p class="zp-wrap-title">工作信息-{{index+1}}</p> 
              <ul class="zp-jobs-info">
                <li><span class="zp-jobs-info-title">单位：</span> <span class="zp-jobs-info-content">{{work.company}}</span></li> 
                <li><span class="zp-jobs-info-title">工作开始日期：</span> <span class="zp-jobs-info-content">{{work.startTime | timeFilter}}</span></li> 
                <li><span class="zp-jobs-info-title">工作结束日期：</span> <span class="zp-jobs-info-content">{{work.endTime | timeFilter}}</span></li> 
                <li><span class="zp-jobs-info-title">所属行业：</span> <span class="zp-jobs-info-content"><span>{{work.industry}}</span></span></li>
                <li><span class="zp-jobs-info-title">单位性质：</span> <span class="zp-jobs-info-content"><span>{{work.companyNature}}</span></span></li>
                <li><span class="zp-jobs-info-title">所在部门：</span> <span class="zp-jobs-info-content"><span>{{work.department}}</span></span></li>
                <li><span class="zp-jobs-info-title">职务：</span> <span class="zp-jobs-info-content"><span>{{work.duty}}</span></span></li>
                <li><span class="zp-jobs-info-title">专业技术职称：</span> <span class="zp-jobs-info-content"><span>{{work.technicalTitle}}</span></span></li>
                <li><span class="zp-jobs-info-title">工作描述：</span> <span class="zp-jobs-info-content"><span>{{work.workDiscribe}}</span></span></li>
              </ul>
            </div>
        </div>
     </el-card>

    <el-card class="box-card">
        <div>
            <div data-v-0b576ed6="" class="zp-wrap">
              <p class="zp-wrap-title">评价</p> 
              <p class="zp-wrap-comment">{{myCommentForm.comment || '暂无'}}</p> 
            </div>
        </div>
     </el-card>

    </el-col>
  </el-row>
  </div>
</template>

<script>
import {
  fetchTree, getObj, addObj, delObj, putObj,getIdCardObj,
  getResumeBaseObj,getResumeEduObj,getResumeWorkObj,getResumeCommentObj
} from 'api/admin/student/index';

import {
  staticData
} from 'mock/staticData';
import { mapGetters } from 'vuex';
export default {
  name: 'menu',
  data() {
    return {
      filterText: '',
      list: null,
      total: null,
      formEdit: false,
      dialogFormVisible: false,
      formAdd: true,
      formStatus: 'create',
      showElement: false,
      typeOptions: ['menu', 'dirt'],

      listQuery: {
        name: null
      },
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'title'
      },
      labelPosition: 'right',
      //届别
      uniersitySessions: staticData.jieOptionsData,
      baseForm: {
        name: null,
        sex: null,
        provinceId: null,
        provinceName: null,
        cityId: null,
        birthday: null,
        nation: null,
        phone: null,
        qq: null,
        wx: null,
        idCard: null,
        addr: null
      },
      resumeEduList: [
          {
          degree: null,
          startTime: null,
          endTime: null,
          studentNo: null,
          sex: null,
          birthday: null,
          nation: null,
          phone: null,
          qq: null,
          wx: null,
          idCard: null,
          addr: null
        }
      ],
      eduForm: {
        degree: null,
        startTime: null,
        endTime: null,
        studentNo: null,
        sex: null,
        birthday: null,
        nation: null,
        phone: null,
        qq: null,
        wx: null,
        idCard: null,
        addr: null
      },
      resumeWorkList:[
          {
          startTime: null,
          endTime: null,
          company: null,
          industry: null,
          function: null,
          position: null,
          department: null,
          companyNature: null,
          enabled: null,
          type: null,
          company_size: null
        }
      ],
      workForm: {
        startTime: null,
        endTime: null,
        company: null,
        industry: null,
        function: null,
        position: null,
        department: null,
        companyNature: null,
        enabled: null,
        type: null,
        company_size: null
      },
      myCommentForm: {
        comment: null
      },
      currentId: -1,
      menuManager_btn_add: false,
      menuManager_btn_edit: false,
      menuManager_btn_del: false,

      degreeOptions: staticData.degreeOptionsData,
      compnaySizeOptions: staticData.compnaySizeOptionsData,
      provinceOptions: staticData.provinceOptionsData,
      cityOptions: staticData.cityOptionsData
    }
  },
  watch: {
    filterText(val) {
      this.$refs.menuTree.filter(val);
    }
  },
  filters:{
     timeFilter(val){
       if(val){
         let index = val.indexOf(' ')
         return val.substring(0,index)
       }
     }
  },
  created() {
    // var idCard = this.$route.query.idCard;
    var role = this.$store.getters.roles[0];
    this.currrentRole = role;
    if(role.code == 'PTYH'){
      this.getUserIdCard();
    }else{
      var idCard = window.localStorage.getItem('currentIdCard');
      if(idCard){
        this.getResumeAll(idCard);
      }
    }
  },
  computed: {
    ...mapGetters([
      'elements'
    ])
  },
  methods: {
    getUserIdCard() {
      getIdCardObj().then(res => {
        if(res.data && res.data.idCard){
          this.getResumeAll(res.data.idCard);
        }
      });
    },
    getResumeAll(idCard){
      this.getResumeBase(idCard);
      this.getResumeEdu(idCard);
      this.getResumeWork(idCard);
      this.getResumeComment(idCard);
    },
    getResumeBase(idCard) {
      getResumeBaseObj(idCard).then(response => {
        this.baseForm = response.data.base;
      });
    },
    getResumeEdu(idCard) {
      getResumeEduObj(idCard).then(response => {
        if(response.data.edu && response.data.edu.length > 0){
          this.resumeEduList = response.data.edu;
        }
      });
    },
    getResumeWork(idCard) {
      getResumeWorkObj(idCard).then(response => {
        if(response.data && response.data.work && response.data.work.length > 0){
          this.resumeWorkList = response.data.work;
        }
      });
    },
    getResumeComment(idCard) {
      getResumeCommentObj(idCard).then(response => {
        if(response.data && response.data.comment){
          this.myCommentForm = response.data.comment;
        }
      });
    },
    handlerEdit() {
      if (this.form.id) {
        this.formEdit = false;
        this.formStatus = 'update';
      }
    },
    handlerAdd() {
      this.resetForm();
      this.formEdit = false;
      this.formStatus = 'create';
    },
    handleDelete() {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delObj(this.currentId).then(() => {
          this.getList();
          this.resetForm();
          this.onCancel();
          this.$notify({
            title: '成功',
            message: '删除成功',
            type: 'success',
            duration: 2000
          });
        });
      });
    },
    update() {
      putObj(this.form.id, this.form).then(() => {
        this.getList();
        this.$notify({
          title: '成功',
          message: '更新成功',
          type: 'success',
          duration: 2000
        });
      });
    },
    //简历各模块统一保存
    create(currentForm, type) {
      //给每种表单设置idCard
      currentForm.idCard = this.baseForm.idCard;
      const set = this.$refs;
      set[type].validate(valid => {
        if (valid) {
          addObj(this.currentForm, type)
            .then(() => {
              this.$notify({
                title: '成功',
                message: '操作成功',
                type: 'success',
                duration: 2000
              });
            })
        } else {
          return false;
        }
      });
    },

    onCancel() {
      // this.formEdit = true;
      // this.formStatus = '';
      this.$router.push({ path: '/talentManager/studentManager' });
    },
    resetForm() {
      this.form = {
        code: null,
        title: null,
        parentId: this.currentId,
        href: null,
        icon: null,
        orderNum: null,
        description: null,
        path: null,
        enabled: null
      };
    },
    handleBack(){
      window.history.go(-1);
      // window.close();
    },
    //添加教育程度
    addResumeEdu(){
      this.resumeEduList.push(
        this.eduForm
      );
    },
    //添加工作信息
    addResumeWork(){
      this.resumeWorkList.push(
        this.workForm
      );
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
.resume-preview-container{
  background: #eee;
  .el-card.box-card{
    width: 80%;
    margin: 10px auto;
  }
}
.zp-wrap {
    padding: 0px 20px;
    background: #fff
}

.zp-wrap-title {
    margin: 10px 0;
    font-size: 24px;
    color: #333;
    font-weight: 700;
}

.zp-blue-circle {
    border-radius: 6px;
    width: 6px;
    height: 6px;
    display: inline-block;
    border: 2px solid #1787fb
}
.zp-jobs-info li:first-child{
    width: 100%;
}
.zp-jobs-info li{
    width: 48%;
    margin-bottom: 16px;
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
}
.zp-jobs-info-title{
    width: 150px;
    font-size: 14px;
    color: #999;
    text-align: left;
    letter-spacing: 1.21px;
    display: inline-block;
    float: left;
}
.zp-jobs-info-content{
    font-size: 14px;
    color: #333;
    float: right;
    width: 290px;
}

/*基本信息样式*/
.card-base-form{
  .el-card__body{
    padding: 0 0;
  }
    .zp-photo-bg {
      background: #fff
  }

  .zp-photo-top {
      width: 100%;
      height: 100px;
      background: url('../../../../../assets/img/resume-base-top.png') no-repeat;
      background-size: 100% 100%;
  }

  .zp-photo-container {
      height: 336px;
      text-align: center
  }

  .zp-photo-imgDiv {
      position: relative;
      top: -26px;
      width: 116px;
      height: 116px;
      display: inline-block;
      background: url(//desktop-bucket.zhaopin.cn/assets/circle-photo.ba9f3c.png) no-repeat -9px;
      background-size: 135px 135px;
  }

  .zp-photo-imgDiv img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      -moz-border-radius: 50%;
      -webkit-border-radius: 50%;
      background-size: cover
  }

  .zp-self-info-name {
      margin: 10px 0;
      font-size: 30px;
      color: #333;
      font-weight: 700;
      letter-spacing: 1.56px
  }

  .zp-self-info-status {
      margin-top: 4px;
      font-size: 14px;
      color: #999;
      letter-spacing: 1.21px
  }

  .zp-self-detail {
      font-size: 16px;
      color: #333;
      letter-spacing: 1.39px
  }

  .zp-self-detail-basic {
      margin-top: 32px
  }

  .zp-self-detail-basic li {
      padding: 0 8px;
      display: inline-block
  }

  .zp-self-detail-basic li:last-child {
      border-right: none
  }

  .zp-self-detail-relation {
      margin-top: 16px;
      text-align: center
  }

  .zp-self-detail-relation li {
      width: 200px;
      display: inline-block
  }

  .zp-self-detail-relation li .img-phone {
      width: 10px;
      height: 16px;
      margin-right: 16px;
      vertical-align: sub
  }

  .zp-self-detail-relation li .img-email {
      width: 16px;
      height: 12px;
      margin-right: 16px;
      vertical-align: sub
  }

  .zp-self-detail-relation .zp-self-center {
      width: 50px
  }

  .zp-split-line {
      width: 1px;
      height: 12px;
      background: #dcdcdc;
      display: inline-block;
      vertical-align: middle
  }
}

</style>

